<!--
 * @Date: 2021-02-06 00:28:45
 * @LastEditTime: 2021-02-06 02:58:41
 * @FilePath: \web-practice-repo\practice\four\four.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>four</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        .photo {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#Scrollspy" data-offset="1">
    <div class="container-fluid">
        <!-- <div class="row">
            <nav class="col-md-3 col-4" id="Scrollspy">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link active">直播</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link active">动态</a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:;" class="nav-link active">番剧</a>
                    </li>
                </ul>
            </nav>
        </div> -->
        <nav class="navbar navbar-expand-md bg-light">
            <a href="javascript:;" class="navbar-brand">📻主站</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">番剧</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">游戏中心</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">直播</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">会员购</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">漫画</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">赛事</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">百年祭</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">📱下载APP</a>
                </li>
            </ul>
            <form class="form-inline">
                <input type="text" class="form-control" placeholder="花泽香菜爱上罗斯福!">
                <div class="input-append">
                    <a href="javascript:;" class="input-text">搜索</a>
                </div>
            </form>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">大会员</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">消息</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">动态</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">收藏</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">历史</a>
                </li>
                <li class="nav-item">
                    <a href="javascript:;" class="nav-link">创造中心</a>
                </li>
            </ul>
            <button type="button" class="btn btn-primary">投稿</button>
        </nav>
        <br />
        <br />
        <br />
        <br />
        <nav class="nav">
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        动画<span class="badge badge-light">330</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">综合</a>
                        <a href="javascript:;" class="dropdown-item">短片</a>
                        <a href="javascript:;" class="dropdown-item">MMD</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        音乐<span class="badge badge-light">589</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">电音</a>
                        <a href="javascript:;" class="dropdown-item">翻唱</a>
                        <a href="javascript:;" class="dropdown-item">MV</a>
                    </div>
                </div>
            </li>
            <!--             <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        舞蹈<span class="badge badge-light">84</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">宅舞</a>
                        <a href="javascript:;" class="dropdown-item">街舞</a>
                        <a href="javascript:;" class="dropdown-item">尬舞/a>
                    </div>
                </div>
            </li> -->
            <!--             <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        知识<span class="badge badge-light">485</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">社科</a>
                        <a href="javascript:;" class="dropdown-item">科学</a>
                        <a href="javascript:;" class="dropdown-item">职场</a>
                    </div>
                </div>
            </li> -->
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        生活<span class="badge badge-light">999+</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">搞笑</a>
                        <a href="javascript:;" class="dropdown-item">日常</a>
                        <a href="javascript:;" class="dropdown-item">职场</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        时尚<span class="badge badge-light">101</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">美妆</a>
                        <a href="javascript:;" class="dropdown-item">健身</a>
                        <a href="javascript:;" class="dropdown-item">服饰</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        娱乐<span class="badge badge-light">666</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">综艺</a>
                        <a href="javascript:;" class="dropdown-item">明星</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        放映厅<span class="badge badge-light">2</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">纪录片</a>
                        <a href="javascript:;" class="dropdown-item">电影</a>
                        <a href="javascript:;" class="dropdown-item">电视剧</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        番剧<span class="badge badge-light">11</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">连载饭局</a>
                        <a href="javascript:;" class="dropdown-item">完结番剧</a>
                        <a href="javascript:;" class="dropdown-item">官方养生</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        国创<span class="badge badge-light">38</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">动画</a>
                        <a href="javascript:;" class="dropdown-item">动漫</a>
                        <a href="javascript:;" class="dropdown-item">番剧</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        游戏<span class="badge badge-light">999+</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">单机</a>
                        <a href="javascript:;" class="dropdown-item">手机</a>
                        <a href="javascript:;" class="dropdown-item">网络</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        数码<span class="badge badge-light">70</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">平板</a>
                        <a href="javascript:;" class="dropdown-item">电脑</a>
                        <a href="javascript:;" class="dropdown-item">摄影</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        动画<span class="badge badge-light">330</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">综合</a>
                        <a href="javascript:;" class="dropdown-item">短片</a>
                        <a href="javascript:;" class="dropdown-item">MMD</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        鬼畜<span class="badge badge-light">17</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">调教</a>
                        <a href="javascript:;" class="dropdown-item">教程</a>
                        <a href="javascript:;" class="dropdown-item">剧场</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        动画<span class="badge badge-light">330</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">综合</a>
                        <a href="javascript:;" class="dropdown-item">短片</a>
                        <a href="javascript:;" class="dropdown-item">MMD</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <div class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        资讯<span class="badge badge-light">3</span>
                    </a>
                    <div class="dropdown-menu">
                        <a href="javascript:;" class="dropdown-item">热点</a>
                        <a href="javascript:;" class="dropdown-item">全球</a>
                        <a href="javascript:;" class="dropdown-item">社会</a>
                    </div>
                </div>
            </li>
        </nav>
        <br />
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div id="photo" class="carousel slide" data-ride="carousel">

                        <!-- 指示符 -->
                        <ul class="carousel-indicators">
                            <li data-target="#photo" data-slide-to="0" class="active"></li>
                            <li data-target="#photo" data-slide-to="1"></li>
                            <li data-target="#photo" data-slide-to="2"></li>
                        </ul>

                        <!-- 轮播图片 -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="./img/3.png">
                            </div>
                            <div class="carousel-item">
                                <img src="./img/1.png" alt="">
                            </div>
                            <div class="carousel-item">
                                <img src="./img/2.png">
                            </div>
                        </div>

                        <!-- 左右切换按钮 -->
                        <a class="carousel-control-prev" href="#photo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#photo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>
                <div class="col-md-2">
                    <div class="container">
                        <img src="./img/4.jpg" alt="" class="photo">
                        <div class="caption">
                            <p>你</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="container">
                        <img src="./img/5.jpg" alt="" class="photo">
                        <div class="caption">
                            <p>的</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="container">
                        <img src="./img/6.jpg" alt="" class="photo">
                        <div class="caption">
                            <p>名字</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>